<template>
  <div>
    <div class="main_navigator fCenterY">
      <div><i class="el-icon-back"></i>&nbsp;&nbsp;<span class="navigator_span" @click="goBack">返回</span>&nbsp;&nbsp;&nbsp;<span
        style="color:#d4d4d4">|</span></div>&nbsp;&nbsp;&nbsp;
      <el-breadcrumb aseparator=">" separator-class="el-icon-arrow-right" style="font-size:16px;">
        <el-breadcrumb-item>{{ crumbOne }}</el-breadcrumb-item>
        <el-breadcrumb-item>
          <span :class="active_crumb">{{ crumbTwo }}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main_content" style="padding-top:0 !important">
      <div class="name">
        <div style="display:flex;padding:8px 0 8px 15px">
          <div>
            <span>总监：</span>
            <span>{{ user_name }}</span>
          </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <div>
            <span>项目名称：</span>
            <span>{{ project_name_record }}</span>
          </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <div>
            <span>编号：</span>
            <span>{{ project_number }}</span>
          </div>
        </div>
        <el-row style="padding:8px 0 8px 15px">
          <span>
            团队成员：
            <span>{{ agency }}</span>
            <span>{{ user_all2 }}</span>
            <span>{{ symbol }}</span>

            <span>{{ engineer }}</span>
            <span>{{ user_all3 }}</span>
            <span>{{ symbol3 }}</span>

            <span>{{ supervisor }}</span>
            <span>{{ user_all4 }}</span>
            <span>{{ symbol4 }}</span>
          </span>
        </el-row>
      </div>
      <div class="select">
        <div>
          <el-form id="sys_projectDetails" :model="searchForm" :inline="true" ref="searchForm" size="mini">
            <el-form-item prop="theDate">
              <el-date-picker
                v-model="searchForm.theDate"
                unlink-panels
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
              <el-button type="primary" @click="doSearch()" class="added">
                <i class="el-icon-search"></i>
                搜索
              </el-button>
              <!--              <el-button type="primary" @click="batchDownload" class="added">-->
              <!--                <i class="el-icon-download"></i>-->
              <!--                批量导出-->
              <!--              </el-button>-->
            </el-form-item>
            <el-form-item>
              <el-button v-if="showBack" @click="doReturn()">
                <i class="el-icon-back"></i>
                返回
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <myTable
          auto='getAllList'
          :height=" Height - 330"
          min-width='130'
          :myColumn='tableProp'
          ahide='index,checkbox,mySplitPage,tooltip,background'
          hide="checkbox"
          multiple
          ref="mytable"
          slots='操作,250,right'
          hook:created=' myTable.tableData = tableData '>
          <template slot-scope='button'>
            <el-button type="success" size="mini" @click="handleLook1(button.scope.$index, button.scope.row)">
              <i class="el-icon-tickets"></i>
              打 印
            </el-button>
            <!--                        <el-button type="success" size="mini" @click="handleLook(button.scope.$index, button.scope.row)">-->
            <!--                          <i class="el-icon-view"></i>-->
            <!--                          查 看-->
            <!--                        </el-button>-->
          <el-button type="primary" size="mini"
                     v-if="button.scope.row.stationType == 11 || button.scope.row.stationType == 12
          || button.scope.row.stationType == 13 || button.scope.row.stationType == 111 || button.scope.row.stationType == 112 || button.scope.row.stationType == 113
          || button.scope.row.stationType == 114 || button.scope.row.stationType == 115 || button.scope.row.stationType == 116 || button.scope.row.stationType == 117
          || button.scope.row.stationType == 118 ||  button.scope.row.stationType == 119 || button.scope.row.stationType == 120 || button.scope.row.stationType == 121
          || button.scope.row.stationType == 122"
                     @click="doDaochu(button.scope.$index, button.scope.row)">
              <i class="el-icon-download"></i>
                          导 出
         </el-button>

            <el-button type="primary" size="mini" v-if="button.scope.row.stationType == 11 || button.scope.row.stationType == 12
          || button.scope.row.stationType == 13 || button.scope.row.stationType == 111 || button.scope.row.stationType == 112 || button.scope.row.stationType == 113
          || button.scope.row.stationType == 114 || button.scope.row.stationType == 115 || button.scope.row.stationType == 116 || button.scope.row.stationType == 117
          || button.scope.row.stationType == 118 ||  button.scope.row.stationType == 119 || button.scope.row.stationType == 120 || button.scope.row.stationType == 121
          || button.scope.row.stationType == 122"
        @click="doDaochuPicture(button.scope.$index, button.scope.row)">
              <i class="el-icon-download"></i>
              导出图片
            </el-button>
          </template>
        </myTable>
      </div>
    </div>

    <tableDetails v-if='isExPort' style='display:none;' astyle='position: relative;
    top: -750px;
    z-index: 777777;'></tableDetails>


  </div>
</template>
<script>
import myhttp from "../../utils/myhttp";
import tableDetails from './tableDetails.vue';

var P;
const arr = ['symbol4', 'symbol3', 'symbol', 'supervisor', 'engineer', 'agency', 'user_all3', 'user_all4', 'user_name', 'project_name_record', 'project_number', 'project_id', 'user_all2'];

export default {
  data() {
    return {
      is: 'RecorD',
      tableHeaderStyle: {
        //表头样式
        "background-color": "rgb(242,242,242)"
      },
      active_crumb: "active_crumb", //面包屑当前颜色
      crumbOne: "项目管理",
      crumbTwo: "详情",
      tableData: [],
      isExPort: false,
      loading: "",
      tableProp: [
        {
          label: "旁站记录表", prop: "stationType", html(prop) {
            return $.class[prop] || '';
          }
        },
        {label: "旁站开始时间", prop: "startTime", sort: true},
        {label: "旁站结束时间", prop: "modifyTime", sort: true},
        {
          label: "状态", prop: "updateState", html (prop) {
            if (prop === 1) {
              return '<span style="color:red">已完成</span>'
            } else if (prop === 0)
              return '<span style="color:green">正在进行</span>'
          }
        },
      ],
      user_name: '',
      project_name_record: '',
      project_number: '',
      project_id: '',
      user_all2: '',
      user_all3: '',
      user_all4: '',
      agency: '',
      engineer: '',
      supervisor: '',
      symbol: '',
      symbol3: '',
      symbol4: '',
      res: 'http://47.104.23.200:8014/yz_file/',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      searchForm: {
        theDate: '',
        // searchText:'',
      },
      showBack: false,
      page: {
        firstInto: true,
        num: '',
        limit: '',
        pageNum: '',
        pageSize: ''
      },
      station_type: '',
      data: {
        __proto__: null,
        // dutyState: [],缺岗
        // standardState: [],符合
        // pouringSequence: [],推移式
        projectSupplierInfoList: [],//供应厂家
      },

      dataListSelections: []
    };
  },
  components: {tableDetails},
  methods: {
    //导出图片
    doDaochuPicture: async function (index, row) {
      console.log("row",row)
      if (row.updateState != 1) return $.msgWarning('此旁站还未完成，请稍后再试！');
      // if( row.stationType === 117 ) {
      //   this.with({
      //     station_id: row.stationId,
      //     station_type: row.stationType,
      //   });
      //   this.isExPort = true;
      //   return;
      // };
      var res = await $.post([$.api.baseUrl_online, 'createPicture'], {
        stationId: row.stationId,
        stationType: row.stationType,
        userName: localStorage.getItem('loginName'),
      });
      if (!res.success) return $.msgError(res.msg || 'error!');
      myhttp.downloadFile(this.res + res.items, "");
    },
    doReturn() {
      this.$refs.searchForm.resetFields();
      this.getAllList();
      this.showBack = false;
    },
    //模糊搜索
    doSearch() {
      this.getAllList();
      this.showBack = true;
    },
    doDaochu: async function (index, row) {
      if (row.updateState != 1) return $.msgWarning('此旁站还未完成，请稍后再试！');
      if (row.stationType === 117) {
        this.with({
          station_id: row.stationId,
          station_type: row.stationType,
          // programme_name: row.programmeName,//工程名称
          // project_name: row.projectName,//项目名称
        });
        this.isExPort = true;
        return;
      } ;

      var res = await $.post([$.api.baseUrl_online, 'createWorld'], {
        stationId: row.stationId,
        stationType: row.stationType,
        userName: localStorage.getItem('loginName'),
      });
      if (!res.success) return $.msgError(res.msg || 'error!');
      myhttp.downloadFile(this.res + res.items, "");
    },
    handleLook(index, row) {
      this.$router.push({
        name: 'tableDetails',
        params: P.with({
          station_id: row.stationId,
          station_type: row.stationType,
          pageNum: this.page.pageNum,
          pageSize: this.page.pageSize
          // programme_name: row.programmeName,//工程名称
          // project_name: row.projectName,//项目名称
        }),
      });
    },

    handleLook1(index, row) {

      if (row.stationType == 11 || row.stationType == 12 || row.stationType == 13 ||
        row.stationType == 111 || row.stationType == 112 || row.stationType == 113 || row.stationType == 114 ||
        row.stationType == 115 || row.stationType == 116 || row.stationType == 117 || row.stationType == 118 ||
        row.stationType == 119 || row.stationType == 120 || row.stationType == 121 || row.stationType == 122) {
        this.$router.push({
          name: 'tableDetails',
          params: P.with({
            station_id: row.stationId,
            station_type: row.stationType,
            pageNum: this.page.pageNum,
            pageSize: this.page.pageSize,
            isprinttables: true
            // programme_name: row.programmeName,//工程名称
            // project_name: row.projectName,//项目名称
          }),
        });
      }
      // 阀门试压
      if (row.stationType == 124) {
        var urls = 'conduitViewpz?stationId=';
        window.open('http://yangzidaxingdiaozhuang.com:8014/vant/#/' + urls + row.stationId, '_blank', 'width=1500,height=800,top=100px,left=100px')
      }
      // 131	仪表压力管道系统压力试验	metersViewpz
      if (row.stationType == 131) {
        var urls = 'metersViewpz?stationId=';
        window.open('http://yangzidaxingdiaozhuang.com:8014/vant/#/' + urls + row.stationId, '_blank', 'width=1500,height=800,top=100px,left=100px')
      }
      // 141	静电、防雷接地线的连接首件	electricalViewpz
      if (row.stationType == 141) {
        var urls = 'electricalViewpz?stationId=';
        window.open('http://yangzidaxingdiaozhuang.com:8014/vant/#/' + urls + row.stationId, '_blank', 'width=1500,height=800,top=100px,left=100px')
      }
      // 151	塔设备进场检验	equipmentViewpz
      if (row.stationType == 151) {
        var urls = 'equipmentViewpz?stationId=';
        window.open('http://yangzidaxingdiaozhuang.com:8014/vant/#/' + urls + row.stationId, '_blank', 'width=1500,height=800,top=100px,left=100px')
      }
      // 201	电气6KV以上电机受电前检查确认、空载运行	electricalViewV2pz
      if (row.stationType == 201) {
        var urls = 'electricalViewV2pz?stationId=';
        window.open('http://yangzidaxingdiaozhuang.com:8014/vant/#/' + urls + row.stationId, '_blank', 'width=1500,height=800,top=100px,left=100px')
      }
      // 202	仪表间或机组控制系统接地电阻测试	metersViewV2pz
      if (row.stationType == 202) {
        var urls = 'metersViewV2pz?stationId=';
        window.open('http://yangzidaxingdiaozhuang.com:8014/vant/#/' + urls + row.stationId, '_blank', 'width=1500,height=800,top=100px,left=100px')
      }
      // 203	大机组找正、二次灌浆	equipmentViewV2pz
      if (row.stationType == 203) {
        var urls = 'equipmentViewV2pz?stationId=';
        window.open('http://yangzidaxingdiaozhuang.com:8014/vant/#/' + urls + row.stationId, '_blank', 'width=1500,height=800,top=100px,left=100px')
      }
      // 204	管道补偿器安装调试	conduitViewV2pz
      if (row.stationType == 204) {
        var urls = 'conduitViewV2pz?stationId=';
        window.open('http://yangzidaxingdiaozhuang.com:8014/vant/#/' + urls + row.stationId, '_blank', 'width=1500,height=800,top=100px,left=100px')
      }
      // 30001	变压器冲击试验	electricalV3Viewpz
      if (row.stationType == 30001) {
        var urls = 'electricalV3Viewpz?stationId=';
        window.open('http://yangzidaxingdiaozhuang.com:8014/vant/#/' + urls + row.stationId, '_blank', 'width=1500,height=800,top=100px,left=100px')
      }
      // 30002	35kV以上高压电器耐压试验	electricalV3Viewspz
      if (row.stationType == 30002) {
        var urls = 'electricalV3Viewspz?stationId=';
        window.open('http://yangzidaxingdiaozhuang.com:8014/vant/#/' + urls + row.stationId, '_blank', 'width=1500,height=800,top=100px,left=100px')
      }
      // 30003	仪表联锁报警调试	metersViewV3pz
      if (row.stationType == 30003) {
        var urls = 'metersViewV3pz?stationId=';
        window.open('http://yangzidaxingdiaozhuang.com:8014/vant/#/' + urls + row.stationId, '_blank', 'width=1500,height=800,top=100px,left=100px')
      }
      // 30004	仪表阀门试验	metersV3Viewspz
      if (row.stationType == 30004) {
        var urls = 'metersV3Viewspz?stationId=';
        window.open('http://yangzidaxingdiaozhuang.com:8014/vant/#/' + urls + row.stationId, '_blank', 'width=1500,height=800,top=100px,left=100px')
      }
      // 30005	现场设备强度及严密性试验	equipmentV3Viewpz
      if (row.stationType == 30005) {
        var urls = 'equipmentV3Viewpz?stationId=';
        window.open('http://yangzidaxingdiaozhuang.com:8014/vant/#/' + urls + row.stationId, '_blank', 'width=1500,height=800,top=100px,left=100px')
      }
      // 30006	大型设备吊装	equipmentV3Viewspz
      if (row.stationType == 30006) {
        var urls = 'equipmentV3Viewspz?stationId=';
        window.open('http://yangzidaxingdiaozhuang.com:8014/vant/#/' + urls + row.stationId, '_blank', 'width=1500,height=800,top=100px,left=100px')
      }
      // 30007	机组轴对中-设计出口压力≥10MPa或转速＞10000r／min的机组轴对中	equipmentV3Viewsspz
      if (row.stationType == 30007) {
        var urls = 'equipmentV3Viewsspz?stationId=';
        window.open('http://yangzidaxingdiaozhuang.com:8014/vant/#/' + urls + row.stationId, '_blank', 'width=1500,height=800,top=100px,left=100px')
      }
      // 30008	变压器冲击试验	conduitV3Viewpz
      if (row.stationType == 30008) {
        var urls = 'conduitV3Viewpz?stationId=';
        window.open('http://yangzidaxingdiaozhuang.com:8014/vant/#/' + urls + row.stationId, '_blank', 'width=1500,height=800,top=100px,left=100px')
      }
      // 30009	压力管道系统压力试验	conduitV3Viewspz
      if (row.stationType == 30009) {
        var urls = 'conduitV3Viewspz?stationId=';
        window.open('http://yangzidaxingdiaozhuang.com:8014/vant/#/' + urls + row.stationId, '_blank', 'width=1500,height=800,top=100px,left=100px')
      }
      // 30010	焊接PMI旁站	weldV3Viewpz
      if (row.stationType == 30010) {
        var urls = 'weldV3Viewpz?stationId=';
        window.open('http://yangzidaxingdiaozhuang.com:8014/vant/#/' + urls + row.stationId, '_blank', 'width=1500,height=800,top=100px,left=100px')
      }
      // 30011	特殊材质焊接焊工首道焊缝的焊接过程旁站	weldV3Viewspz
      if (row.stationType == 30011) {
        var urls = 'weldV3Viewspz?stationId=';
        window.open('http://yangzidaxingdiaozhuang.com:8014/vant/#/' + urls + row.stationId, '_blank', 'width=1500,height=800,top=100px,left=100px')
      }
      // 30012	现场组焊设备产品焊接试板的焊接过程旁站	weldV3Viewsspz
      if (row.stationType == 30012) {
        var urls = 'weldV3Viewsspz?stationId=';
        window.open('http://yangzidaxingdiaozhuang.com:8014/vant/#/' + urls + row.stationId, '_blank', 'width=1500,height=800,top=100px,left=100px')
      }
      // 400001	35kV以上电缆耐压试验	electricalV4Viewpz
      if (row.stationType == 400001) {
        var urls = 'electricalV4Viewpz?stationId=';
        window.open('http://yangzidaxingdiaozhuang.com:8014/vant/#/' + urls + row.stationId, '_blank', 'width=1500,height=800,top=100px,left=100px')
      }
      // 400002	电动仪表阀门试验	metersV4Viewpz
      if (row.stationType == 400002) {
        var urls = 'metersV4Viewpz?stationId=';
        window.open('http://yangzidaxingdiaozhuang.com:8014/vant/#/' + urls + row.stationId, '_blank', 'width=1500,height=800,top=100px,left=100px')
      }
      // 400003	机组单机试车-设计出口压力≥10MPa或转速＞10000r／min的机组单机试车	equipmentV4Viewpz
      if (row.stationType == 400003) {
        var urls = 'equipmentV4Viewpz?stationId=';
        window.open('http://yangzidaxingdiaozhuang.com:8014/vant/#/' + urls + row.stationId, '_blank', 'width=1500,height=800,top=100px,left=100px')
      }
      // 400004	6kv以上驱动的泵单机试车	equipmentV4Viewspz
      if (row.stationType == 400004) {
        var urls = 'equipmentV4Viewspz?stationId=';
        window.open('http://yangzidaxingdiaozhuang.com:8014/vant/#/' + urls + row.stationId, '_blank', 'width=1500,height=800,top=100px,left=100px')
      }
      // 400005	储罐底板焊缝真空箱试验	equipmentV4Viewsspz
      if (row.stationType == 400005) {
        var urls = 'equipmentV4Viewsspz?stationId=';
        window.open('http://yangzidaxingdiaozhuang.com:8014/vant/#/' + urls + row.stationId, '_blank', 'width=1500,height=800,top=100px,left=100px')
      }
      // 400006	无压力管道闭水试验	conduitV4Viewpz
      if (row.stationType == 400006) {
        var urls = 'conduitV4Viewpz?stationId=';
        window.open('http://yangzidaxingdiaozhuang.com:8014/vant/#/' + urls + row.stationId, '_blank', 'width=1500,height=800,top=100px,left=100px')
      }
    },
    goBack() {
      // this.$router.go(-1);
      this.$router.push({name: "projectManagement2"});
    },
    openLoading() {
      //loading请求等待
      this.loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },
    getAllList: async function (pageNum, pageSize) {//getStationByProjectId
      this.page.pageNum = this.page.firstInto ? this.page.num || pageNum : pageNum
      this.page.pageSize = this.page.firstInto ? this.page.limit || pageSize : pageSize
      var res = await $.post('getStationByProjectIdPc', {
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize,
        projectId: this.project_id,
        startTime: this.searchForm.theDate[0], //开始日期
        endTime: this.searchForm.theDate[1], //结束日期
        singleProject: null
      });
      // res.items = mapArr(res.items,v=>v.isSecond==1&&v);
      if (this.page.firstInto && this.page.num) {
        res.currentPage = this.page.num
        res.limitTiao = this.page.limit
      }
      this.page.firstInto = false
      $return('__', res);
      if (!res.success) return $.msgError(res.msg || 'error!');
    },
    // 选中
    chooseItem(val) {
        let a  = val.filter((v,i)=>{
        if  (v.stationType == 11 || v.stationType == 12 || v.stationType == 13 ||
          v.stationType == 111 || v.stationType == 112 || v.stationType == 113 || v.stationType == 114 ||
          v.stationType == 115 || v.stationType == 116 || v.stationType == 117 || v.stationType == 118 ||
          v.stationType == 119 || v.stationType == 120 || v.stationType == 121 || v.stationType == 122){
          return
        }else {
          return v
        }
      })

      this.$refs.mytable.mytable(a)
      this.dataListSelections = val
    },
    // 批量导出
    batchDownload: async function () {
      if (this.dataListSelections.length < 2) {
        return $.msgWarning('请至少选择两条完成的旁站！');
      }
      for (var i = 0; i < this.dataListSelections.length; i++) {
        if (this.dataListSelections[i].updateState != 1) {
          return $.msgWarning('选中的第' + (i + 1) + '条旁站还未完成，请选择完成的旁站！');
        }
      }
      var res = await $.post([$.api.baseUrl_online, 'exportBatch'], {
        selectStations: JSON.stringify(this.dataListSelections),
        userName: localStorage.getItem('loginName'),
        userId: localStorage.getItem("userId")
      });
      if (!res.success) return $.msgError(res.msg || 'error!');
      myhttp.downloadFile(this.res + res.items, "");
    }
  },
  created() {
    P = this.$route.params;
    // console.error(P);
    if (G.isEmpty(P)) {
      arr.forEach(v => {
        this[v] = localStorage.getItem(v) || '';
      });
    } else {
      arr.forEach(v => {
        localStorage.setItem(v, this[v] = P[v]);
      });
      this.page.num = P.pageNum || ''
      this.page.limit = P.pageSize || ''
    }
    ;
  },
  destroyed() {
    // G.clearLocal(arr);
  },
  mounted() {
  }
};
</script>
<style scoped>
.name {
  border: 1px solid #d4d4d4;
}

.name .el-row:first-child, .name .el-row:nth-child(2) {
  padding: 10px 0 10px 20px;
}

.el-row:nth-child(2) {
  border-top: 1px solid #d4d4d4;
}

.select {
  border-left: 1px solid #d4d4d4;
  border-right: 1px solid #d4d4d4;
  border-bottom: 1px solid #d4d4d4;
  padding: 1px 8px 80px 8px;
}

.active_crumb {
  color: rgb(90, 160, 230);
}
</style>


